<template>
	<div class="container">
	  <!-- 面包屑导航 -->
	  <navbar></navbar>
	  <div class="content">
	    <h2>标签库</h2>
	    <h3>数据筛选</h3>
		<div>
		  <el-form ref="search" :model="search" :inline="true" id="search" size="small">
		    <el-form-item label="标签" prop="tagName">
		      <el-input
		        v-model="search.tagName"
		        clearable
		        placeholder="标签名称"
		      ></el-input>
		    </el-form-item>
		    <el-form-item label="标签分类" prop="typeFlag">
		      <el-select
		        v-model="search.typeFlag"
		        placeholder="请选择礼包支付方式"
		        clearable
		      >
		        <el-option label="商品" value="1"></el-option>
				<el-option label="礼包" value="2"></el-option>
		      </el-select>
		    </el-form-item>
		    <el-form-item label="状态" prop="status">
		      <el-select
		        v-model="search.status"
		        placeholder="请选择状态"
		        clearable
		      >
		        <el-option label="启用" value="1"></el-option>
		        <el-option label="停用" value="2"></el-option>
		      </el-select>
		    </el-form-item>
		    <el-form-item>
		      <el-button type="primary" @click="fetchData('search')">查询</el-button>
		      <el-button
		        type="primary"
		        plain
		        @click="fetchData('reset')"
		        >重置</el-button
		      ></el-form-item
		    >
		  </el-form>
		</div>
	  </div>
	  <div class="content">
	    <h3 class="data-list-title">数据列表
	      <p>
			<el-button size="small" type="primary" @click="addNew()">新增</el-button>
			<el-button size="small" style="border-color: #409EFF;color: #409EFF;" plain @click="showDelet(2,'stop')">批量停用</el-button>
			<el-button size="small" style="border-color: #409EFF;color: #409EFF;" plain @click="showDelet(1,'start')">批量启用</el-button>
	        
	      </p>
	    </h3>
		<div style="width: 100%;">
			<el-table :data="dataList" style="width: 100%;"
				@selection-change="handleSelectionChange"
				:header-cell-style="{'background-color':'#F8F8F8',color:'#333',fontSize:'16px'}">
				<el-table-column type="selection"></el-table-column>
				<el-table-column label="标签" prop="tagName"></el-table-column>
				<el-table-column label="标签分类" prop="typeFlagLabel"></el-table-column>
				<el-table-column label="商品数" prop="quantity"></el-table-column>
				<el-table-column label="是否首页展示" prop="showFlag">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.showFlag == 1 ? true : false" @change="getFlagChange($event,scope.row.id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="序号" prop="sort"></el-table-column>
				<el-table-column label="状态" prop="status">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status == 1 ? true : false" @change="getStatusChange($event,scope.row.id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" prop="createdTime"></el-table-column>
				<el-table-column label="操作" prop="tagName">
					<template slot-scope="scope">
					<div class="tablebtnbox">
						<span class="tablebtn" @click="getLabelInfo(scope.row.id,1)">查看</span>
						<span class="tablebtn" style="margin: 0 12px;" @click="getLabelInfo(scope.row.id,2)">编辑</span>
						<span class="tablebtn" style="color: #F33F3F;" @click="showDelet(scope.row,'del')">删除</span>
					</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		
	  </div>
	  <div style="float: right;margin-bottom: 20px;">
	  	<el-pagination
	  	    v-if="dataList.length > 0"
	  	    background
	  	    @size-change="onSizeChange"
	  	    @current-change="onCurrentChange"
	  	    :current-page="pageNo"
	  	    :page-sizes="[10, 20, 50]"
	  	    :page-size="pageSize"
	  	    layout="total, sizes, prev, pager, next, jumper"
	  	    :total="totalNum">
	  	</el-pagination>
	  </div>
	  <el-dialog
		append-to-body
		:visible.sync="dialogVisible"
		width="600px"
	  >
		  <div slot='title'>
			  <i class="el-icon-warning" :style="{color:statusType == 'del'?'red':'yellow'}"></i>
			  {{diologTips}}
		  </div>
		  {{tagName}}
		  <div slot='footer'>
		  	<el-button @click="dialogVisible = false">取消</el-button>
			<el-button type="primary" @click="deleteFn()">确定</el-button>
		  </div>
	  </el-dialog>
	  <el-dialog
		:title="dialogTitle"
		:visible.sync="showNewDiolog"
		width="600px"
		append-to-body
	  >
		  <div>
			  <el-form :model="ruleForm" label-width="110px" :rules="rules" ref="ruleForm">
				  <el-form-item label="标签" prop="tagName">
					<p v-if="writeType == 1">{{ruleForm.tagName}}</p>
				    <el-input v-else v-model="ruleForm.tagName" placeholder="请输入标签名称" style="width: 400px;"></el-input>
				  </el-form-item>
				  <el-form-item label="标签分类" prop="typeFlag">
					<p v-if="writeType == 1">{{ruleForm.typeFlag == 1 ? '商品':'礼包'}}</p>
				    <el-select v-else v-model="ruleForm.typeFlag" placeholder="请选择标签分类" style="width: 400px;">
				        <el-option label="商品" :value="1"></el-option>
						<el-option label="礼包" :value="2"></el-option>
				      </el-select>
				  </el-form-item>
				  <el-form-item label="序号" prop="sort">
					<p v-if="writeType == 1">{{ruleForm.sort}}</p>
				    <el-input v-else v-model="ruleForm.sort" placeholder="请输入序号" style="width: 400px;"></el-input>
				  </el-form-item>
				  <el-form-item label="是否首页展示" prop="showFlag">
					<p v-if="writeType == 1">{{ruleForm.showFlag == 1 ? '是':'否'}}</p>
				    <template v-else>
				      <el-radio v-model="ruleForm.showFlag" :label="1">是</el-radio>
				      <el-radio v-model="ruleForm.showFlag" :label="0">否</el-radio>
				    </template>
				  </el-form-item>
				  <el-form-item label="状态" prop="status">
					  <p v-if="writeType == 1">{{ruleForm.status == 1 ? '启用':'禁用'}}</p>
				    <template v-else>
				      <el-radio v-model="ruleForm.status" :label="1">启用</el-radio>
				      <el-radio v-model="ruleForm.status" :label="2">禁用</el-radio>
				    </template>
				  </el-form-item>
			  </el-form>
		  </div>
		  <span slot="footer" class="dialog-footer">
		      <el-button @click="cancelFn">取 消</el-button>
		      <el-button v-if="writeType == 2" type="primary" @click="saveTagFn">确 定</el-button>
		    </span>
	  </el-dialog>
	</div>
</template>

<script>
	import navbar from '@/components/navbar.vue'
	import common from './mixins/common'
	export default{
		mixins: [common],
		components: { navbar },
		data(){
			return{
				search:{
					tagName:'',
					typeFlag:'',
					status:''
				},
				pageNo:1,
				pageSize:10,
				currentPage:1,
				totalNum:10,
				tagList:[],
				dataList:[],
				selectList:[],
				dialogVisible:false,
				lid:null,
				tagName:'',
				diologTips:'',
				showNewDiolog:false,
				ruleForm:{
					tagName:'',
					typeFlag:2,
					sort:'',
					showFlag:0,
					status:2
				},
				rules: {
				  tagName: [
				    { required: true, message: '请输入标签名称', trigger: 'blur' }
				  ],
				  typeFlag: [
				    { required: true, message: '请选择标签分类', trigger: 'blur' }
				  ],
				  sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
				  showFlag: [{ required: true, message: '', trigger: 'change' }],
				  status: [{ required: true, message: '', trigger: 'change' }]
				},
				dialogTitle:'新增标签',
				writeType:1,
				statusType:'del'
			}
		},
		created() {
			// this.getSelectTagData()
			this.getTagList()
		},
		methods:{
			cancelFn(){
				this.showNewDiolog = false;
				this.$refs['ruleForm'].resetFields() 
			},
			addNew(){
				this.showNewDiolog = true;
				this.dialogTitle = '新增标签';
				this.writeType = 2;
				this.ruleForm = {
					tagName:'',
					typeFlag:2,
					sort:'',
					showFlag:0,
					status:2
				}
			},
			getLabelInfo(id,type){
				this.dialogTitle = '编辑/查看标签';
				this.writeType = type;
				this.$api.getLabelInfo({id:id})
				.then(res=>{
					console.log(res);
					 Object.assign(this.ruleForm, res.data)
					this.showNewDiolog = true;
				})
			},
			saveTagFn(){
				this.$api.saveTag(this.ruleForm)
				.then(res=>{
					console.log(res);
					this.getTagList()
					this.showNewDiolog = false;
				})
			},
			deleteFn(){
				if(this.statusType === 'del'){
					this.$api.deleteLabel([this.lid])
					.then(res=>{
						console.log(res);
						this.getTagList()
						this.dialogVisible = false;
					})
				}else if(this.statusType === 'start'){
					this.enabelFn(1)
				}else{
					this.enabelFn(2)
				}
				
			},
			showDelet(item,type){
				this.dialogVisible = true;
				if(type == 'del'){
					this.lid = item.id;
					this.tagName = `是否删除已选的${item.tagName}标签？`;
					this.diologTips = '删除提示'
				}else if(type == 'start'){
					this.tagName = `是否启用已选的${this.selectList.length}个标签？`;
					this.diologTips = '批量启用提示';
				}else{
					this.tagName = `是否停用已选的${this.selectList.length}个标签？`;
					this.diologTips = '批量停用提示';
				}
				this.statusType = type;
				
			},
			enabelFn(status){
				if(this.selectList.length == 0){
					return console.log(444)
				}
				let tagIdList = this.selectList.map(item=>{
					return item.id
				})
				let data = {
					status:status,
					tagIdList:tagIdList
				}
				this.enableTag(data)
			},
			handleSelectionChange(e){
				this.selectList = e;
			},
			getFlagChange(e,id){
				let status = e ? 1 : 0
				this.dataList.forEach(item=>{
					if(item.id == id){
						item.status = status;
					}
				}) 
				let data = {
					showFlag:status,
					tagIdList:[id]
				}
				this.$api.showToIndex(data)
				.then(res=>{
					console.log(res);
					this.getTagList()
				})
			},
			getStatusChange(e,id){
				let status = e ? 1 : 2
				this.dataList.forEach(item=>{
					if(item.id == id){
						item.status = status;
					}
				}) 
				let data = {
					status:status,
					tagIdList:[id]
				}
				this.enableTag(data)
			},
			enableTag(data){
				this.$api.enableTag(data)
				.then(res=>{
					console.log(res);
					this.dialogVisible = false;
					this.getTagList()
				})
			},
			onSizeChange(e){
				this.pageSize = e;
				this.pageNo = 1;
				this.getTagList()
			},
			onCurrentChange(e){
				this.pageNo = e;
				this.getTagList()
			},
			fetchData(type){
				this.pageNo = 1
				this.pageSize = 10
				if(type == 'reset'){
					this.$refs['search'].resetFields()
					this.pageNo = 1
					this.pageSize = 10
					this.currentPage = 1
				}else{
					this.getTagList()
				}
			},
			getTagList(){
				let data = {
					pageNo:this.pageNo,
					pageSize:this.pageSize
				}
				data = Object.assign(data, this.search)
				this.$api.tagList(data)
				.then(res=>{
					console.log(res);
					this.dataList = res.data.list;
					this.totalNum = res.data.totalNum;
				})
				.catch(err=>{
					console.log(err);
				})
			},
			// getSelectTagData(){
			// 	this.$api.selectTagData({})
			// 	.then(res=>{
			// 		this.tagList = res.data;
					
			// 	})
			// 	.catch(err=>{
			// 		console.log(err);
			// 	})
			// }
		}
	}
</script>

<style scoped lang="scss">
@import './assets/common';
.data-list-title{
  p{
    width: 666px;
    display: inline-block;
    float: right;
    
    .el-button{
      margin-left: 20px;
      float: right;
    }
  }

}
.tablebtnbox{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	color: #409EFF;
	span{
		cursor: pointer;
	}
}
</style>